<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-06 00:34:26
 * @LastEditTime: 2020-03-19 11:53:28
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/echarts.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/app-tree.js"></script>
    <style type="text/css">
        .row {
            padding: 5px 5px 0 5px;
        }

        .row .row-full {
            padding: 10px;
            background: #fff;
        }

        .title {
            overflow: hidden;
            margin-bottom: 10px;
            font-size: 16px;
        }

        .title .title-left {
            float: left;
            font-weight: 700;
        }

        .title .title-left .img {
            display: inline-block;
            padding: 7px;
            text-align: center;
            border-radius: 4px;
            margin-right: 5px;
        }

        .title .title-left img {
            width: 22px;
            height: 22px;
        }

        .title .title-right {
            float: right;
            height: 36px;
            line-height: 36px;
            ;
        }

        .title .title-right span {
            font-size: 15px;
            color: #000;
            margin-left: 5px;
        }

        .title .title-right span.on {
            color: #33b5e6;
            border-bottom: 2px solid #33b5e6;
        }

        .row-data {
            /* padding: 10px; */
        }

        .row-data .data-title {
            height: 36px;
            color: #7d7d7d;
            line-height: 36px;
            font-size: 15px;
        }

        .row-data .data-value {
            height: 36px;
            padding-left: 30px;
            line-height: 36px;
            color: #000;
            font-weight: 700;
            font-size: 15px;
        }

        .row-data .data-sub-value {
            height: 36px;
            padding-left: 30px;
            line-height: 36px;
            color: #7d7d7d;
            font-weight: 700;
            font-size: 13px;
        }

        .row-data .data-title * {
            vertical-align: middle;
        }

        .row-data .data-img {
            width: 20px;
            margin-right: 10px;
        }

        .row-data .van-cell {
            font-size: 14px;
        }

        .row-data .van-cell__title {
            max-width: none;
            font-weight: 500;

        }

        .row-data .van-cell__value {
            text-align: right;
            font-size: 16px;
            line-height: 45px;
        }

        .row-data .van-cell .sort {
            display: inline-block;
            font-weight: 700;
            font-size: 16px;
            margin-right: 5px;
        }

        .row-line {
            height: 1px;
            background: #dddddd;
        }

        .more {
            font-size: 15px;
            text-align: center;
            color: #323232;
            padding: 10px;
        }

        .row-chart {
            height: 220px;
        }

        .none {
            font-size: 15px;
            text-align: center;
            color: #7d7d7d;
            padding: 10px;
        }

        .tab {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
        }

        .tab>div {
            /* width: 60px; */
            font-size: 13px;
            color: #000;
            background: #efefef;
            padding: 5px 5px;
            margin: 0 5px;
            display: inline-block;
            text-align: center;
            border-radius: 6px;
        }

        .tab>div.on {
            background: #cd1b21;
            color: #fff;
        }


        .tree {
            height: 350px;
            overflow-y: auto;
            font-size: 14px;
            box-shadow: 0 0px 12px #ebedf0;
            padding: 10px 0 10px 0;
            transition: all 0.4s;
            z-index: 999;
            padding-left: 5px;
            padding-right: 10px;
        }

        .tree ul {
            padding-left: 13px;
            transition: all 0.4s;
            position: relative;
            /* overflow: hidden; */
        }

        .tree .tree-node {
            overflow: hidden;
            position: relative;
        }

        .tree ul li {
            position: relative;
        }


        .tree-row {
            position: relative;
        }




        .tree-row.on {
            color: #469ede;
        }

        .tree-row>* {
            vertical-align: middle;
        }

        .tree-row i {
            margin-left: -14px;
            transition: all 0.4s;
        }

        .tree-row span {
            margin-left: 4px;
        }

        .tree-row .tran {
            transform: rotate(90deg);
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="数据看板" left-arrow @click-left="onClickLeft">
                <div slot="right" class="head-right">
                    <span @click="showSearch = true;">
                        <img src="../image/search.png" />
                    </span>
                </div>
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="row" v-if="data.ds">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>老板关键数据</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>资金余额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>押金</span>
                                        </div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds[0]?data.ds[0].ZJ_Money:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds[0]?data.ds[0].YJ_Money:0}}元</div>
                                    </van-col>


                                </van-row>
                            </div>
                            <div class="row-line"></div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-2.png" />
                                            <span>预收款</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-3.png" />
                                            <span>应收款</span>
                                        </div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds[0]?data.ds[0].YS_Money:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds[0]?data.ds[0].YF_Money:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-3.png" />
                                            <span>供应商欠款</span>
                                        </div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds[0]?data.ds[0].GYS_Money:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds1">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>资金构成分析</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>总部资金</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds1[0]?data.ds1[0].XJ_Money:0}}元</div>
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>分公司资金</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds1[0]?data.ds1[0].YH_Money:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="row-chart" id="ds1"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds2">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>采购关键数据</span>
                                </div>
                                <div class="title-right">
                                    <span :class="data.ds2[0].DType == 1?'on':''" @click="toggleTab('ds2',1)">本日</span>
                                    <span :class="data.ds2[0].DType == 2?'on':''" @click="toggleTab('ds2',2)">本周</span>
                                    <span :class="data.ds2[0].DType == 3?'on':''" @click="toggleTab('ds2',3)">本月</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>采购总额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds2[0].DMoney || 0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds2[0].BCS || 0}}笔</div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds3">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background:#ed7d31;">
                                        <img src="../image/marketing/marketing-3.png" />
                                    </span>
                                    <span>采购/销售趋势</span>
                                </div>
                                <div class="title-right">
                                    <span :class="data.ds3[0].DType == 1?'on':''" @click="toggleTab('ds3',1)">近7天</span>
                                    <span :class="data.ds3[0].DType == 2?'on':''" @click="toggleTab('ds3',2)">本月</span>
                                    <span :class="data.ds3[0].DType == 3?'on':''" @click="toggleTab('ds3',3)">本年</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>采购金额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>销售金额</span>
                                        </div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds3[0].CGZE || 0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds5[0].XSZE || 0}}元</div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-chart" id="ds3"></div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds4">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>销售关键数据</span>
                                </div>
                                <div class="title-right">
                                    <span :class="data.ds4[0].DType == 1?'on':''" @click="toggleTab('ds4',1)">本日</span>
                                    <span :class="data.ds4[0].DType == 2?'on':''" @click="toggleTab('ds4',2)">本周</span>
                                    <span :class="data.ds4[0].DType == 3?'on':''" @click="toggleTab('ds4',3)">本月</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>销售总额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds4[0].DMoney || 0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds4[0].BCS || 0}}笔</div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="row" v-if="data.ds5">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background:#ed7d31;">
                                        <img src="../image/marketing/marketing-3.png" />
                                    </span>
                                    <span>销售趋势</span>
                                </div>
                                <div class="title-right">
                                    <span :class="data.ds5[0].DType == 1?'on':''" @click="toggleTab('ds5',1)">近7天</span>
                                    <span :class="data.ds5[0].DType == 2?'on':''" @click="toggleTab('ds5',2)">本月</span>
                                    <span :class="data.ds5[0].DType == 3?'on':''" @click="toggleTab('ds5',3)">本年</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>销售金额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds5[0].XSZE || 0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value"></div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-chart" id="ds5" v-if="data.ds5[0].XSZE"></div>
                        </div>
                    </div> -->

                    <div class="row" v-if="data.ds6">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #29ac60;">
                                        <img src="../image/marketing/marketing-4.png" />
                                    </span>
                                    <span>库存数量</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>库存余额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds6[0]?data.ds6[0].DMoney:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value"></div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-line"></div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-4.png" />
                                            <span>商品种数</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-5.png" />
                                            <span>商品数量</span>
                                        </div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds6[0]?data.ds6[0].BTS:0}}</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds6[0]?data.ds6[0].BNum:0}}</div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-line"></div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>代销库存余额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds6[1]?data.ds6[1].DMoney:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value"></div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-line"></div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-4.png" />
                                            <span>代销商品种数</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-5.png" />
                                            <span>代销商品数量</span>
                                        </div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds6[1]?data.ds6[1].BTS:0}}</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds6[1]?data.ds6[1].BNum:0}}</div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds7">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background:#f1594b;">
                                        <img src="../image/marketing/marketing-5.png" />
                                    </span>
                                    <span>客户欠款</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>欠款总额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds7[0]?data.ds7[0].YSJE:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value"></div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-data">
                                <van-cell-group v-if="data.ds7[0].ClientName">
                                    <van-cell v-for="(row,index) in data.ds7">
                                        <div slot="title">
                                            <span class="sort">{{index+1}}</span>
                                            <span>{{row.ClientName}}</span>
                                        </div>
                                        <div slot="label">
                                            <div style="padding-left: 20px;">应收：{{row.DMoney}}</div>
                                        </div>
                                        <div>
                                            <van-icon name="phone-o" size="26px" color="#ffa401"></van-icon>
                                        </div>
                                    </van-cell>
                                </van-cell-group>
                                <div class="none" v-else>暂无数据</div>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds8">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background:#f1594b;">
                                        <img src="../image/marketing/marketing-5.png" />
                                    </span>
                                    <span>供应商欠款</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>欠款总额</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds8[0]?data.ds8[0].YFJE:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value"></div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-data">
                                <van-cell-group v-if="data.ds8[0].ClientName">
                                    <van-cell v-for="(row,index) in data.ds8">
                                        <div slot="title">
                                            <span class="sort">{{index+1}}</span>
                                            <span>{{row.ClientName}}</span>
                                        </div>
                                        <div slot="label">
                                            <div style="padding-left: 20px;">应收：{{row.DMoney}}</div>
                                        </div>
                                    </van-cell>
                                </van-cell-group>
                                <div class="none" v-else>暂无数据</div>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds9">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>客户近况</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>客户总量</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title"></div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value">{{data.ds9[0]?data.ds9[0].BCnt:0}}</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-value"></div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="row-line"></div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-2.png" />
                                            <span>本周新增</span>
                                        </div>

                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-3.png" />
                                            <span>流失(三个月无往来)</span>
                                        </div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds9[0]?data.ds9[0].BNew:0}}</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="data-sub-value">{{data.ds9[0]?data.ds9[0].BLiu:0}}</div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds10">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background:#f1594b;">
                                        <img src="../image/marketing/marketing-5.png" />
                                    </span>
                                    <span>活跃客户排行</span>
                                </div>
                                <div class="title-right">
                                    <span class="on">近30天</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-cell-group>
                                    <van-cell v-for="(row,index) in data.ds10" :value="row.DMoney">
                                        <div slot="title">
                                            <span class="sort">{{index+1}}</span>
                                            <span>{{row.ClientName}}</span>
                                        </div>
                                        <div slot="label">
                                            <div style="padding-left: 20px;">笔数：{{row.BCnt}}</div>
                                        </div>
                                    </van-cell>
                                </van-cell-group>
                                <div class="none" v-if="data.ds10.length == 0">暂无数据</div>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds11">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background:#f1594b;">
                                        <img src="../image/marketing/marketing-5.png" />
                                    </span>
                                    <span>热销商品</span>
                                </div>
                                <div class="title-right">
                                    <span :class="data.ds11[0].DType == 1?'on':''"
                                        @click="toggleTab('ds11',1)">近7天</span>
                                    <span :class="data.ds11[0].DType == 2?'on':''"
                                        @click="toggleTab('ds11',2)">本月</span>
                                    <span :class="data.ds11[0].DType == 3?'on':''"
                                        @click="toggleTab('ds11',3)">本年</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-cell-group v-if="data.ds11[0].ProductName">
                                    <van-cell v-for="(row,index) in data.ds11" :value="row.BNum">
                                        <div slot="title">
                                            <span class="sort">{{index+1}}</span>
                                            <span>{{row.ProductName}}</span>
                                        </div>
                                        <div slot="label">
                                            <div style="padding-left: 20px;">{{row.ProductSpec}}</div>
                                        </div>
                                    </van-cell>
                                </van-cell-group>
                                <div class="none" v-else>暂无数据</div>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds12">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>出货次数统计</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>送货次数</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds12[0]?data.ds12[0].SHH:0}}</div>
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>补货次数</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds12[0]?data.ds12[0].BHH:0}}</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="row-chart" id="ds12"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="data.ds12">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>出货金额统计</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>送货金额</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds12[0]?data.ds12[0].SMN:0}}元</div>
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>补货金额</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds12[0]?data.ds12[0].BMN:0}}元</div>
                                    </van-col>
                                    <van-col span="12">
                                        <div class="row-chart" id="ds14"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="data.ds13">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>支付方式统计</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="12">
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>{{data.ds13[0].X_Val}}</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds13[0]?data.ds13[0].Y_Val:0}}</div>
                                        <div class="data-title">
                                            <img class="data-img" src="../image/marketing/data-1.png" />
                                            <span>{{data.ds13[1].X_Val}}</span>
                                        </div>
                                        <div class="data-sub-value">{{data.ds13[1]?data.ds13[1].Y_Val:0}}</div>
                                        <!-- <div class="data-title">
                                             <img class="data-img" src="../image/marketing/data-1.png" />
                                             <span>{{data.ds13[2].X_Val}}</span>
                                         </div>
                                         <div class="data-sub-value">{{data.ds13[2]?data.ds13[2].Y_Val:0}}</div> -->
                                    </van-col>
                                    <van-col span="12">
                                        <div class="row-chart" id="ds13"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="data.ds14">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>单品销售统计</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="24">
                                        <div class="row-chart" id="ds15"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="data.ds15">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>出货次数统计</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="24">
                                        <div class="row-chart" style="height: 280px;" id="ds16"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="data.ds15">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>出货金额统计</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="24">
                                        <div class="row-chart" style="height: 280px;" id="ds17"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                    <div class="row" v-if="data.ds16">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>库存月度对照</span>
                                </div>
                                <div class="title-right"></div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="24">
                                        <div class="row-chart" style="height: 280px;" id="ds18"></div>
                                    </van-col>
                                </van-row>
                            </div>
                            <div class="tab">
                                <div v-for="row in data.ds16" :class="tabValue == row.DateTypeID?'on':''"
                                    @click="toggleLastTab(row)">{{row.DateTypeNM}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds18">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>总部销售类型对比</span>
                                </div>
                                <div class="title-right">
                                    <span :class="data.ds18[0].DType == 1?'on':''"
                                        @click="toggleTab('ds18',1)">本月</span>
                                    <span :class="data.ds18[0].DType == 2?'on':''"
                                        @click="toggleTab('ds18',2)">近三月</span>
                                    <span :class="data.ds18[0].DType == 3?'on':''"
                                        @click="toggleTab('ds18',3)">本年度</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="24">
                                        <div class="row-chart" style="height: 280px;" id="ds19"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds19">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>分店销售及应收对比</span>
                                </div>
                                <div class="title-right">
                                    <span class="on" @click="showTreeEvent(1)">筛选</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="24">
                                        <div class="row-chart" style="height: 280px;" id="ds20"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>

                    <div class="row" v-if="data.ds20">
                        <div class="row-full">
                            <div class="title">
                                <div class="title-left">
                                    <span class="img" style="background: #64b7f9;">
                                        <img src="../image/marketing/marketing-1.png" />
                                    </span>
                                    <span>分店销售及应收月度对比</span>
                                </div>
                                <div class="title-right">
                                    <span class="on" @click="showTreeEvent(2)">筛选</span>
                                </div>
                            </div>
                            <div class="row-data">
                                <van-row>
                                    <van-col span="24">
                                        <div class="row-chart" style="height: 280px;" id="ds21"></div>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <van-popup v-model="showSearch" round position="bottom">
            <div>
                <van-cell title="分支机构" :value="searchData.S_BranchName" is-link @click="openScreen(-1,99)"></van-cell>
                <van-cell title="开始时间" :value="searchData.S_SDate" @click="openDate(1)">
                </van-cell>
                <van-cell title="结束时间" :value="searchData.S_EDate" @click="openDate(2)">
                </van-cell>
            </div>
            <div class="btn-padding">
                <van-button type="primary" block style="border-radius: 0;" @click="searchList">查询</van-button>
            </div>
        </van-popup>

        <van-popup v-model="showDate" round position="bottom">
            <van-datetime-picker v-model="currentDate" type="date" @confirm="confirmDate" @cancel="cancelDate"
                cancel-button-text="清空" />
        </van-popup>

        <van-popup v-model="showTree" position="bottom">
            <app-tree :tree="treeData" :rowheight="32" @tree-click="selectTree"></app-tree>
        </van-popup>

    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();
        var userInfo = FLD.getUserInfo();

        var index = 0;

        var dateIndex = 0;

        api.addEventListener({
            name: 'selectArray'
        }, function (ret, err) {
            var selectType = ret.value.selectType;
            var type = ret.value.type;
            var array = ret.value.array;
            if (selectType == 99) {
                var nameArray = [];
                var idArray = [];
                for (var i in array) {
                    nameArray.push(array[i].name);
                    idArray.push(array[i].id);
                }
                vm.searchData.S_BranchName = nameArray.join();
                vm.searchData.S_BranchID = idArray.join();

            }
        })

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                showSearch: false,
                showDate: false,
                currentDate: new Date(),
                userInfo: userInfo,
                searchData: {
                    S_BranchID: '',
                    S_BranchName: '',
                    S_BType: 0,
                    S_DateType: 1,
                    S_SDate: '',
                    S_EDate: '',
                    S_Str: ''
                },
                data: [],
                tabValue: '',
                treeData: [],
                showTree: false
            },
            created: function () {
                var that = this;
                that.getData();
            },
            methods: {
                selectTree(row) {
                    var that = this;
                    that.showTree = false;
                    if (index == 1) {
                        that.toggleTab('ds19', 1, row.id);
                    } else {
                        that.toggleTab('ds20', 1, row.id);
                    }

                },
                showTreeEvent(index_) {
                    var that = this;
                    index = index_;
                    var obj = {
                        S_Type: 667,
                        S_Cont: '',
                        S_BranchID: that.userInfo.S_BranchID,
                        S_SXZ: '',
                        S_StockID: that.userInfo.S_StockID,
                        S_CargoID: that.userInfo.S_CargoID,
                        S_BarCode: '',
                        S_PriceN: 0,
                        S_ProductID: 0
                    }
                    FLD.ajax('AP_BasList', obj, function (res) {
                        for (var i in res.ds) {
                            res.ds[i].label = res.ds[i].name;
                        }

                        var repeatData = function (row) {
                            var d_data = [];
                            for (var i in res.ds) {
                                if (row.id == res.ds[i].UpID) {
                                    d_data.push(repeatData(res.ds[i]))
                                }
                            }
                            row.node = d_data;
                            return row;
                        }

                        var data = [];
                        for (var i in res.ds) {
                            var x = 0;
                            var y = 0
                            var d_data = [];
                            for (var j in res.ds) {
                                if (res.ds[i].id == res.ds[j].UpID) {
                                    x = 1;
                                    d_data.push(repeatData(res.ds[j]))
                                }
                                if (res.ds[i].UpID == res.ds[j].id) {
                                    y = 1;
                                }
                            }

                            res.ds[i].node = d_data;
                            if (x == 1 && y == 0) {
                                data.push(res.ds[i]);
                            }

                        }

                        that.treeData = data;
                        that.showTree = true;
                    })
                },
                getData() {
                    var that = this;
                    that.showLoading = true;
                    FLD.ajax('AP_DatQuery', that.searchData, function (res) {
                        that.showLoading = false;
                        if (res.ds[0].status && res.ds[0].status == 500) {
                            layer.open({
                                content: res.ds[0].msg,
                                skin: 'msg',
                                time: 2
                            });
                            return false;
                        }
                        that.data = res;
                        that.$nextTick(function () {
                            if (that.data.ds1.length) {
                                var xData = ['库存现金', '银行存款'];
                                var yData = [];
                                yData.push({ value: that.data.ds1[0].XJ_Money, name: '库存现金' });
                                yData.push({ value: that.data.ds1[0].YH_Money, name: '银行存款' });
                                that.setCharts('pie', 'ds1', xData, yData)
                            }
                            if (that.data.ds3.length) {
                                var legend = ['采购金额', '销售金额'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '采购金额',
                                        type: 'line',
                                        data: []
                                    },
                                    {
                                        name: '销售金额',
                                        type: 'line',
                                        data: []
                                    }
                                ]
                                var yData1 = [];
                                var yData2 = [];
                                for (var i in that.data.ds3) {
                                    xData.push(that.data.ds3[i].BDay);
                                    yData1.push(that.data.ds3[i].DMoney);
                                }
                                for (var i in that.data.ds5) {
                                    yData2.push(that.data.ds5[i].DMoney);
                                }
                                yData[0].data = yData1;
                                yData[1].data = yData2;
                                that.setCharts('line_multi', 'ds3', xData, yData, legend)
                            }
                            // if (that.data.ds5.length) {
                            //     var xData = [];
                            //     var yData = [];
                            //     for (var i in that.data.ds5) {
                            //         xData.push(that.data.ds5[i].BDay);
                            //         yData.push(that.data.ds5[i].DMoney);
                            //     }
                            //     that.setCharts('line', 'ds5', xData, yData)
                            // }
                            if (that.data.ds12.length) {
                                var xData = ['送货次数', '补货次数'];
                                var xData1 = ['送货金额', '补货金额'];
                                var yData = [];
                                var yData1 = [];
                                yData.push({ value: that.data.ds12[0].SHH, name: '送货次数' });
                                yData.push({ value: that.data.ds12[0].BHH, name: '补货次数' });
                                yData1.push({ value: that.data.ds12[0].SMN, name: '送货金额' });
                                yData1.push({ value: that.data.ds12[0].BMN, name: '补货金额' });
                                that.setCharts('pie', 'ds12', xData, yData)
                                that.setCharts('pie', 'ds14', xData1, yData1)
                            }
                            if (that.data.ds13.length) {
                                var xData = ['微信支付', '支付宝支付', '线下支付'];
                                var yData = [];
                                yData.push({ value: that.data.ds13[0].Y_Val, name: that.data.ds13[0].X_Val });
                                yData.push({ value: that.data.ds13[1].Y_Val, name: that.data.ds13[1].X_Val });
                                // yData.push({ value: that.data.ds13[2].Y_Val, name: that.data.ds13[2].X_Val });
                                that.setCharts('pie', 'ds13', xData, yData)
                            }
                            if (that.data.ds14.length) {
                                var xData = [];
                                var yData = [];
                                for (var i in that.data.ds14) {
                                    xData.push(that.data.ds14[i].X_Val);
                                    yData.push({ value: that.data.ds14[i].Y_Val, name: that.data.ds14[i].X_Val });
                                }
                                that.setCharts('pie', 'ds15', xData, yData)
                            }
                            if (that.data.ds15.length) {
                                var legend = ['送货金额', '补货金额', '送货金额占比', '补货金额占比'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '送货金额',
                                        type: 'bar',
                                        barWidth: 20,
                                        data: []
                                    },
                                    {
                                        name: '补货金额',
                                        type: 'bar',
                                        barWidth: 20,
                                        data: []
                                    },
                                    {
                                        name: '送货金额占比',
                                        type: 'line',
                                        yAxisIndex: 1,
                                        data: []
                                    },
                                    {
                                        name: '补货金额占比',
                                        type: 'line',
                                        yAxisIndex: 1,
                                        data: []
                                    }
                                ]
                                for (var i in that.data.ds15) {
                                    xData.push(that.data.ds15[i].YEF);

                                    yData[0].data.push(that.data.ds15[i].SMN);
                                    yData[1].data.push(that.data.ds15[i].BMN);
                                    yData[2].data.push((that.data.ds15[i].SMN * 100 / (that.data.ds15[i].SMN + that.data.ds15[i].BMN)).toFixed(2));
                                    yData[3].data.push((that.data.ds15[i].BMN * 100 / (that.data.ds15[i].SMN + that.data.ds15[i].BMN)).toFixed(2));
                                }
                                that.setCharts('bar_line', 'ds17', xData, yData, legend)
                            }
                            if (that.data.ds15.length) {
                                var legend = ['送货次数', '补货次数', '送货次数占比', '补货次数占比'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '送货次数',
                                        type: 'bar',
                                        barWidth: 20,
                                        data: []
                                    },
                                    {
                                        name: '补货次数',
                                        type: 'bar',
                                        barWidth: 20,
                                        data: []
                                    },
                                    {
                                        name: '送货次数占比',
                                        type: 'line',
                                        yAxisIndex: 1,
                                        data: []
                                    },
                                    {
                                        name: '补货次数占比',
                                        type: 'line',
                                        yAxisIndex: 1,
                                        data: []
                                    }
                                ]
                                for (var i in that.data.ds15) {
                                    xData.push(that.data.ds15[i].YEF);

                                    yData[0].data.push(that.data.ds15[i].SHH);
                                    yData[1].data.push(that.data.ds15[i].BHH);
                                    yData[2].data.push((that.data.ds15[i].SHH * 100 / (that.data.ds15[i].SHH + that.data.ds15[i].BHH)).toFixed(2));
                                    yData[3].data.push((that.data.ds15[i].BHH * 100 / (that.data.ds15[i].SHH + that.data.ds15[i].BHH)).toFixed(2));
                                }
                                that.setCharts('bar_line', 'ds16', xData, yData, legend)
                            }
                            if (that.data.ds16.length) {
                                that.tabValue = that.data.ds16[0].DateTypeID;
                                var obj = {
                                    S_BranchID: that.searchData.S_BranchID,
                                    S_BranchName: that.searchData.S_BranchName,
                                    S_BType: 200,
                                    S_DateType: that.data.ds16[0].DateTypeID,
                                    S_SDate: that.searchData.S_SDate,
                                    S_EDate: that.searchData.S_EDate
                                }
                                FLD.ajax('AP_DatQuery', obj, function (res_d) {

                                    var legend = ['金额', '数量'];
                                    var xData = [];
                                    var yData = [
                                        {
                                            name: '金额',
                                            type: 'bar',
                                            barWidth: 20,
                                            data: []
                                        },
                                        {
                                            name: '数量',
                                            type: 'line',
                                            yAxisIndex: 1,
                                            data: []
                                        }
                                    ]
                                    for (var i in res_d.ds) {
                                        xData.push(res_d.ds[i].BMonth);

                                        yData[0].data.push(res_d.ds[i].J_CMoney);
                                        yData[1].data.push(res_d.ds[i].J_BNum);
                                    }
                                    that.setCharts('bar_line', 'ds18', xData, yData, legend)
                                })



                            }
                            if (that.data.ds18.length) {
                                var xData = ['直营', '电商', '经销商'];
                                var yData = [that.data.ds18[0].AMoney, that.data.ds18[0].BMoney, that.data.ds18[0].CMoney];
                                that.setCharts('bar', 'ds19', xData, yData, [])
                            }

                            if (that.data.ds19.length) {
                                var legend = ['本期销售', '本期应收'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '本期销售',
                                        type: 'bar',
                                        barWidth: 10,
                                        data: []
                                    },
                                    {
                                        name: '本期应收',
                                        type: 'line',
                                        data: []
                                    }
                                ]
                                for (var i in that.data.ds19) {
                                    xData.push(that.data.ds19[i].BSName);

                                    yData[0].data.push(that.data.ds19[i].XSMoney);
                                    yData[1].data.push(that.data.ds19[i].BARMoney);
                                }
                                that.setCharts('bar_line', 'ds20', xData, yData, legend)
                            }

                            if (that.data.ds20.length) {
                                var legend = ['销售', '应收'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '销售',
                                        type: 'bar',
                                        barWidth: 10,
                                        data: []
                                    },
                                    {
                                        name: '应收',
                                        type: 'line',
                                        data: []
                                    }
                                ]
                                for (var i in that.data.ds20) {
                                    xData.push(that.data.ds20[i].BSName);

                                    yData[0].data.push(that.data.ds20[i].XSMoney);
                                    yData[1].data.push(that.data.ds20[i].BARMoney);
                                }
                                that.setCharts('bar_line', 'ds21', xData, yData, legend, that.data.ds20[0].FName)
                            }

                        })
                    })
                },
                toggleLastTab(row) {
                    var that = this;
                    that.tabValue = row.DateTypeID;
                    var obj = {
                        S_BranchID: that.searchData.S_BranchID,
                        S_BranchName: that.searchData.S_BranchName,
                        S_BType: 200,
                        S_DateType: row.DateTypeID,
                        S_SDate: that.searchData.S_SDate,
                        S_EDate: that.searchData.S_EDate
                    }
                    FLD.ajax('AP_DatQuery', obj, function (res_d) {

                        var legend = ['金额', '数量'];
                        var xData = [];
                        var yData = [
                            {
                                name: '金额',
                                type: 'bar',
                                barWidth: 20,
                                data: []
                            },
                            {
                                name: '数量',
                                type: 'line',
                                yAxisIndex: 1,
                                data: []
                            }
                        ]
                        for (var i in res_d.ds) {
                            xData.push(res_d.ds[i].BMonth);

                            yData[0].data.push(res_d.ds[i].J_CMoney);
                            yData[1].data.push(res_d.ds[i].J_BNum);
                        }
                        that.setCharts('bar_line', 'ds18', xData, yData, legend)
                    })
                },
                toggleTab(m, index, id) {
                    var that = this;
                    if (m == 'ds3') {
                        that.searchData.S_BType = 46;

                    } else {
                        that.searchData.S_BType = that.data[m][0].BType;
                    }

                    if (m == 'ds19' || m == 'ds20') {
                        that.searchData.S_Str = id;
                    } else {
                        that.searchData.S_Str = '';
                    }

                    that.searchData.S_DateType = index;
                    that.showLoading = true;
                    FLD.ajax('AP_DatQuery', that.searchData, function (res) {
                        that.showLoading = false;
                        if (res.ds[0].status && res.ds[0].status == 500) {
                            layer.open({
                                content: res.ds[0].msg,
                                skin: 'msg',
                                time: 2

                            });
                            return false;
                        }
                        that.data[m] = res.ds;

                        that.$nextTick(function () {
                            if (m == 'ds3') {
                                that.toggleTab('ds5', index);
                                var legend = ['采购金额', '销售金额'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '采购金额',
                                        type: 'line',
                                        data: []
                                    },
                                    {
                                        name: '销售金额',
                                        type: 'line',
                                        data: []
                                    }
                                ]
                                var yData1 = [];
                                var yData2 = [];
                                for (var i in res.ds) {
                                    xData.push(res.ds[i].BDay);
                                    yData1.push(res.ds[i].DMoney);
                                }
                                for (var i in res.ds1) {
                                    yData2.push(res.ds1[i].DMoney);
                                }
                                yData[0].data = yData1;
                                yData[1].data = yData2;
                                that.setCharts('line_multi', 'ds3', xData, yData, legend)
                            } else if (m == 'ds18') {
                                var xData = ['直营', '电商', '经销商'];
                                var yData = [res.ds[0].AMoney, res.ds[0].BMoney, res.ds[0].CMoney];
                                that.setCharts('bar', 'ds19', xData, yData, [])
                            } else if (m == 'ds19') {

                                var legend = ['本期销售', '本期应收'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '本期销售',
                                        type: 'bar',
                                        barWidth: 10,
                                        data: []
                                    },
                                    {
                                        name: '本期应收',
                                        type: 'line',
                                        data: []
                                    }
                                ]
                                for (var i in res.ds) {
                                    xData.push(res.ds[i].BSName);

                                    yData[0].data.push(res.ds[i].XSMoney);
                                    yData[1].data.push(res.ds[i].BARMoney);
                                }
                                that.setCharts('bar_line', 'ds20', xData, yData, legend)
                            } else if (m == 'ds20') {

                                var legend = ['销售', '应收'];
                                var xData = [];
                                var yData = [
                                    {
                                        name: '销售',
                                        type: 'bar',
                                        barWidth: 10,
                                        data: []
                                    },
                                    {
                                        name: '应收',
                                        type: 'line',
                                        data: []
                                    }
                                ]
                                for (var i in res.ds) {
                                    xData.push(res.ds[i].BSName);

                                    yData[0].data.push(res.ds[i].XSMoney);
                                    yData[1].data.push(res.ds[i].BARMoney);
                                }
                                that.setCharts('bar_line', 'ds21', xData, yData, legend,res.ds[0].FName)
                            }
                        })

                    })
                },
                openScreen(type, index) {
                    var obj = {
                        S_Type: index,
                        S_Cont: '',
                        S_BranchID: userInfo.S_BranchID,
                        S_SXZ: '',
                        S_StockID: userInfo.S_StockID,
                        S_CargoID: userInfo.S_CargoID,
                        S_BarCode: '',
                        S_PriceN: userInfo.S_PriceN,
                        S_ProductID: 0
                    }
                    api.openWin({
                        name: '筛选' + index,
                        url: 'common/baseMultipleScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        pageParam: {
                            filterData: obj,
                            type: type
                        }
                    })

                },
                searchList() {
                    var that = this;
                    that.showSearch = false;
                    that.searchData.S_BType = 0;
                    that.searchData.S_DateType = 1;
                    that.getData();
                },
                setCharts(type, id, xData, yData, legend,title) {
                    var that = this;
                    var chart = echarts.init(document.getElementById(id));
                    if (type == 'line') {
                        var option = {
                            
                            tooltip: {
                                trigger: 'axis'
                            },
                            grid: {
                                top: '3%',
                                left: '3%',
                                right: '3%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xData
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    type: 'line',
                                    smooth: true,
                                    areaStyle: { normal: {} },
                                    data: yData
                                }
                            ]
                        };
                        chart.setOption(option);
                    } else if (type == 'line_multi') {
                        var option = {
                            legend: {
                                data: legend
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            grid: {
                                top: '30%',
                                left: '3%',
                                right: '5%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: xData
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: '元'
                                }
                            ],
                            series: yData
                        };
                        chart.setOption(option);
                    } else if (type == 'bar') {
                        var option = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            grid: {
                                top: '3%',
                                left: '3%',
                                right: '3%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: xData
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    type: 'bar',
                                    barWidth: 20,
                                    data: yData
                                }
                            ]
                        };
                        chart.setOption(option);
                    } else if (type == 'pie') {
                        var option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b} : {c} ({d}%)',
                                position: ['0%', '50%']
                            },
                            legend: {
                                orient: 'horizontal',
                                left: 'left',
                                data: xData
                            },
                            series: [
                                {
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: yData,
                                    label: {
                                        normal: {
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        chart.setOption(option);
                    } else if (type == 'bar_line') {
                        var option = {
                            title:{
                                text:title,
                                textStyle:{
                                    fontSize:14
                                }
                                
                            },
                            grid: {
                                top: '30%',
                                left: '3%',
                                right: '5%',
                                bottom: '3%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: legend
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: xData,
                                    axisLabel: {
                                        formatter: function (params) {
                                            var newParamsName = "";
                                            var paramsNameNumber = params.length;
                                            var provideNumber = ((id == 'ds20') ? 1 : 99);  //一行显示几个字
                                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                            if (paramsNameNumber > provideNumber) {
                                                for (var p = 0; p < rowNumber; p++) {
                                                    var tempStr = "";
                                                    var start = p * provideNumber;
                                                    var end = start + provideNumber;
                                                    if (p == rowNumber - 1) {
                                                        tempStr = params.substring(start, paramsNameNumber);
                                                    } else {
                                                        tempStr = params.substring(start, end) + "\n";
                                                    }
                                                    newParamsName += tempStr;
                                                }

                                            } else {
                                                newParamsName = params;
                                            }
                                            return newParamsName
                                        }
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value',
                                    name: id == 'ds16' ? '次数' : (id == 'ds18' ? '金额(万)' : '金额'),
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                {
                                    type: 'value',
                                    splitLine: {
                                        show: false
                                    },
                                    name: id == 'ds18' ? '数量(万)' : '比例',
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                }

                            ],
                            series: yData
                        };
                        if (id == 'ds20' || id == 'ds21') {
                            option.yAxis.splice(1, 1);
                        }
                        chart.setOption(option);
                    }
                },
                openDate(index) {
                    dateIndex = index;
                    this.currentDate = new Date()
                    this.showDate = true;
                },
                confirmDate(value) {
                    if (dateIndex == 1) {
                        this.searchData.S_SDate = FLD.getFormatDate(value).split(' ')[0]
                    } else {
                        this.searchData.S_EDate = FLD.getFormatDate(value).split(' ')[0]
                    }
                    this.showDate = false;
                },
                cancelDate(value) {
                    if (dateIndex == 1) {
                        this.searchData.S_SDate = ''
                    } else {
                        this.searchData.S_EDate = '';
                    }
                    this.showDate = false;
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>